<template>
<div style="height:100%">
   <vue-seamless-scroll :data="List" class="seamless-warp" :class-option="classOption">
    <ul>
      <li
        class="Carousel_li"
        v-for="(item,index) in List"
        :class="[{'pro_1':item.title=='1'},{'pro_2':item.title=='2'},{'pro_3':item.title=='3'}]"
        :key="index"
      >
        <span class="title" v-if="item.title=='1'">已完成</span>
        <span class="title" v-if="item.title=='2'">进行中</span>
        <span class="title" v-if="item.title=='3'">未开始</span>
      </li>
    </ul>
  </vue-seamless-scroll>
</div>
 
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  // props:['List'],
  data() {
    return {
      name: "无缝轮播-注意只能用span",
      List: [
        {
          title: 1
        },
        {
          title: 2
        },
        {
          title: 3
        },
       
      ]
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        // limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  components: {
    //组件
    vueSeamlessScroll
  }
};
</script>
<style lang="scss" scoped>
.seamless-warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.Carousel_li {
  display: flex;
  padding-right: 0.5%;
  width: 100%;
  height: 20px;
  line-height: 20px;
  background-size: 100% !important;
  color: #bdf3f6;
  margin-bottom: 5px;
  font-size:16px;
  .title {
    padding: 0 1% 0 4%;
    width: 21%;
  }
  .ovr_h {
    width: 51%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/*未开始*/
.pro_1 {
  background: #00fcd8;
  .title {
    color: #f89d2e;
  }
}
/*进行中*/
.pro_2 {
  background: #f89d2e;
  .title {
    color: #00fcd8;
  }
}
/*已完成*/
.pro_3 {
  background: #bdf3f6;
  .title {
    color: #3cff45;
  }
}
</style>